<template>
	<div class="w100 h100 flex-col position-relative p-t-30 p-l-10 p-r-10">
		<el-row :gutter="10" class="h100 overflow-y-auto">
			<el-col class="m-b-10" :sm="12" :xs="24" style="height: calc(50% - 10px)" v-for="item in list" :key="item.areaName">
				<my-box class="h100" :title="item.areaName">
					<div class="flex m-between h100">
						<div class="left flex-col">
							<!-- 按钮一键启动、一键倒机 -->
							<div class="flex">
								<div class="start pointer">
									<img src="@/assets/img/rd/start.png" style="vertical-align: middle" alt="" />
									<span style="font-size: 14px; color: #deedff">一键启动</span>
								</div>
								<div class="stop m-l-10 pointer">
									<img src="@/assets/img/rd/backCar.png" style="vertical-align: middle" alt="" />
									<span style="font-size: 14px; color: #deedff">一键倒机</span>
								</div>
							</div>
							<!-- 数据 -->
							<div class="flex m-t-20">
								<span class="m-r-20" style="color: #fff; font-size: 14px"
									>风速 <span class="m-l-5" style="color: #397bfd">{{ item.windSpeed }}m/s</span>
								</span>
								<span class="m-r-20" style="color: #fff; font-size: 14px"
									>瓦斯 <span class="m-l-5" style="color: #397bfd">{{ item.gas }}%</span>
								</span>
								<span class="m-r-20" style="color: #fff; font-size: 14px"
									>正压 <span class="m-l-5" style="color: #397bfd">{{ item.positivePressure }}Pa</span>
								</span>
							</div>
							<!-- gis -->
							<div class="f1 h0 flex-center position-relative pointer">
								<img src="@/assets/img/rd/wind.png" alt="" />
								<img class="successicon" src="@/assets/img/rd/windSuccess.png" alt="" />
								<img class="dangericon" src="@/assets/img/rd/windDanger.png" alt="" />
							</div>
						</div>
						<div class="right overflow-y-auto h100 flex-col" style="width: 400px">
							<my-table :data="item.data" :columns="item.columns" size="small">
								<template #name="{ row }">
									<span style="color: #fff">{{ row.name }} </span>
								</template>
							</my-table>
						</div>
					</div>
				</my-box>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="comprehensive/localVentilation">
import { ventilationInfo } from '@a/local-ventilation'

// 通风信息
let list = ref([])
ventilationInfo().then((res) => {
	res.data.forEach((item) => {
		const columns = [{ prop: 'name', label: '名称' }]
		item.fanData.forEach((item, i) => {
			columns.push({ prop: `draught${i + 1}`, label: item.fanName })
		})
		const data = [
			{ name: '运行状态', key: 'runningState' },
			{ name: '风机排风量', key: 'exhaustAirCount', unit: '㎡/min' },
			{ name: '电压', key: 'fanVoltage', unit: 'V' },
			{ name: '电流', key: 'fanCurrent', unit: 'A' },
			{ name: '水平震动', key: 'horizontalVibration', unit: 'mm/s' },
			{ name: '垂直震动', key: 'verticalVibration', unit: 'mm/s' },
			{ name: '水平风门', key: 'horizontalDoor' },
			{ name: '垂直风门', key: 'verticalDoor' },
			{ name: '前轴温度', key: 'frontAxleTemperature', unit: '℃' },
			{ name: '后轴温度', key: 'rearAxleTemperature', unit: '℃' }
		]
		data.forEach((item2) => {
			item.fanData.forEach((item3, i) => {
				if (item2.unit) {
					item2[`draught${i + 1}`] = `${item3[item2.key] ?? 0} ${item2.unit}`
				} else {
					item2[`draught${i + 1}`] = item3[item2.key]
				}
			})
		})
		delete item.fanData
		list.value.push({
			columns,
			data,
			...item
		})
	})
})
</script>

<style lang="scss" scoped>
.left {
	.start,
	.stop {
		height: 36px;
		padding: 3px 25px;
		text-align: center;
		line-height: 36px;
		font-size: 14px;
		letter-spacing: 2px;
		border-radius: 4px;
		background: linear-gradient(180deg, #2c62b3 1%, #0e3064 100%);
		box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
		span {
			margin-left: 5px;
		}
	}
	.successicon {
		position: absolute;
		top: 32%;
		left: 50%;
		animation: fadenum 2s linear infinite;
	}
	.dangericon {
		position: absolute;
		top: 56%;
		left: 50%;
		animation: fadenum 2s linear infinite;
	}
	@keyframes fadenum {
		0% {
			transform: rotate(0);
		}
		100% {
			transform: rotate(360deg);
		}
	}
}
.right {
	.start,
	.stop {
		display: inline-block;
		margin-left: 5px;
		width: 8px;
		height: 8px;
		opacity: 1;
		background: #45b854;
		border-radius: 50%;
	}
	.stop {
		background: #e76060;
	}
}
</style>
